<%@page language="java" session="true"%>
<%@ page isELIgnored="false" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Sección mejoras</title>
<link rel="stylesheet" type="text/css" href="mejora.css" />
</head>

<body>
<c:set var="juego"  value="${sessionScope.juego }"/>
<c:set var="appMejorar"  value="${sessionScope.appMejorar }"/>
<div id="container">
<div id="title">
			<h1>Jardin ZEN - Mejoras</h1>
			<h3 id="plantUpgrading">${appMejorar.plantaAMejorar}</h3>
			
			
		</div>
	
	<div  id ="navigation"> 
	
	<ul>
	
	<li>
			<div class="morphing-glowing">
			<a href="index.jsp">
			<span class="image-wrap "  style=" position:relative; display:inline-block; background-image: url(splash.png) no-repeat center; width: 80px; height: 60px;    ">
			
			<img src="splash.png" style="opacity: 1; width: 80px; height: 60px;"/></span></a>
			</div>
			</li>
			
			<li><form method="get" action="search">
		<input type="hidden" value="" name="planta"/>
	    <input type="hidden" value="1" name="orden"/>
	    <input type="hidden" value="nombre" name="propiedad"/>
			<input class="buttonJardin"type="submit" value="Volver al jardin" />
		</form></li>
			<li><h3>Dinero disponible: ${juego.getUsuario().getPuntos()} </h3></li>
			
			<li><img src="plantas/${appMejorar.plantaAMejorar.nombre}.png" style="opacity: 1; width: 80px; height: 60px;"/></li>
		</ul>
		
		
		
		
		
		
		</div>
		<div id="tablesPanel">
		<div id = "leftTable">
		<form method="get" action="EfectuarMejora">
			<input class="buttonUpgrade" type="submit" value="Mejorar" />
		
		
          
			<table >
				<tr>
					<th colspan="5">
						<h2>Mejoras Disponibles</h2>
					</th>
				</tr>
				<tr>
					<th>#</th>
					<th> Descripción </th>
					<th> Precio </th>
					<th> Ataque </th>
					<th> Defensa </th>
				</tr>
				
				<c:forEach items="${appMejorar.plantaAMejorar.mejorasDisponibles}" var="mejoraC"
					varStatus="status">
					<tr>
						<td><input type="radio" name="selec"
							value="${mejoraC.nombre }" /></td>
						<td>${mejoraC.nombre}</td>
						<td>${mejoraC.precio}</td>
						<td>${mejoraC.ataque}</td>
						<td>${mejoraC.defensa}</td>
					</tr>
				</c:forEach>

			</table>
             
		
</form>
		</div>

     <div id="rightTable">
			<table  >
				<tr>
					<th colspan="5">
						<h2>Mejoras Compradas</h2>
					</th>
				</tr>
				<tr>
					<th>#</th>
					<th> Descripción </th>

					<th> Ataque </th>
					<th> Defensa </th>
				</tr>
				<c:forEach items="${appMejorar.plantaAMejorar.mejorasCompradas}" var="mejora"
					varStatus="status">
					<tr>
						<td>${status.count} </td>

						<td>${mejora.nombre} </td>

						<td>${mejora.ataque} </td>
						<td>${mejora.defensa} </td>
					</tr>
				</c:forEach>
			</table>
			</div>
		</div>

	
	</div>
</body>
</html>